<template>
  <div class="train_container">
    <a-card>
      <template #title>{{ trainName }}</template>
      <template #extra>
        <div class="btn_green" v-if="isGenerate" @click="isGenerate = false">
          生成报告
        </div>
        <div class="flex item_center" v-else>
          <div class="time">数据生成时间：2023-07-11 18:30</div>
          <div class="btn_green_empty mx_10">编辑报告</div>
          <div class="btn_green" @click="handleGenerate">发送报告</div>
        </div>
      </template>
      <div class="flex justify_center">
        <div class="content">
          <div
            :id="`component-box${index}`"
            class="component-box"
            :class="item && item.isHalf ? 'half' : ''"
            v-for="(item, index) in components"
            :key="index"
            @click="onActive(index)"
          >
            <component
              class="component"
              :class="isActive == index ? 'component-edit-active' : ''"
              :is="item.nameId"
              :echartsId="index"
              :isView="2"
            ></component>
          </div>
        </div>
      </div>
    </a-card>
    <SendReportDialog ref="send" />
  </div>
</template>
<script>
import SendReportDialog from "./components/SendReportDialog/SendReportDialog.vue";
import Basic from "./components/Basic.vue";
import DataOverview from "./components/DataOverview.vue";
import OnlineCourseFinish from "./components/OnlineCourseFinish.vue";
import OnlineExamPass from "./components/OnlineExamPass.vue";
import OfflineCourseAttendance from "./components/OfflineCourseAttendance.vue";
import OnlineExamPassRank from "./components/OnlineExamPassRank.vue";
import OnlineCourseFinishDetail from "./components/OnlineCourseFinishDetail.vue";
import OnlineCourseDepartmentFinishDetail from "./components/OnlineCourseDepartmentFinishDetail.vue";
import DepartmentOnlineExamPassDetail from "./components/DepartmentOnlineExamPassDetail.vue";
import DepartmentOutlineExamPassDetail from "./components/DepartmentOutlineExamPassDetail.vue";
import DepartmentOutlineCourseCheckDetail from "./components/DepartmentOutlineCourseCheckDetail.vue";
import TeacherEvaluationCardTitDetail from "./components/TeacherEvaluationCardTitDetail.vue";
import TeacherEvaluationSubjectiveDetail from "./components/TeacherEvaluationSubjectiveDetail.vue";
import StudentStatisticalSummary from "./components/StudentStatisticalSummary.vue";
import DepartmentStatisticalSummary from "./components/DepartmentStatisticalSummary.vue";
export default {
  provide() {
    return {
      isShowPageNum: "no",
    };
  },
  data() {
    return {
      isActive: -1,
      index: 0,
      components: [], //需要渲染的组件数据
      isGenerate: true,
      trainName: "培训报告",
    };
  },
  components: {
    SendReportDialog,
    Basic,
    DataOverview,
    OnlineCourseFinish,
    OnlineExamPass,
    OfflineCourseAttendance,
    OnlineExamPassRank,
    OnlineCourseFinishDetail,
    OnlineCourseDepartmentFinishDetail,
    DepartmentOnlineExamPassDetail,
    DepartmentOutlineExamPassDetail,
    DepartmentOutlineCourseCheckDetail,
    TeacherEvaluationCardTitDetail,
    TeacherEvaluationSubjectiveDetail,
    StudentStatisticalSummary,
    DepartmentStatisticalSummary,
  },
  created() {
    this.get_data();
  },
  mounted() {},
  methods: {
    get_data() {
      this.components.push(
        {
          nameId: "Basic",

          isHalf: false,
        },
        {
          nameId: "DataOverview",

          isHalf: false,
        },
        {
          nameId: "OnlineCourseFinish",

          isHalf: true,
        },
        {
          nameId: "OnlineExamPass",

          isHalf: true,
        },

        {
          nameId: "OfflineCourseAttendance",

          isHalf: true,
        },
        {
          nameId: "OnlineCourseFinishDetail",
          isHalf: false,
        },
        {
          nameId: "OnlineCourseDepartmentFinishDetail",
          isHalf: false,
        },
        {
          nameId: "DepartmentOnlineExamPassDetail",
          isHalf: false,
        },
        {
          nameId: "DepartmentOutlineExamPassDetail",
          name: "+部门线下考试通过明细",
          isHalf: false,
        },
        {
          nameId: "DepartmentOutlineCourseCheckDetail",
          name: "+部门线下课考勤明细",
          isHalf: false,
        },
        {
          nameId: "TeacherEvaluationCardTitDetail",
          name: "+讲师评价-评价项得分明细",
          isHalf: false,
        },
        {
          nameId: "TeacherEvaluationSubjectiveDetail",
          name: "+讲师评价-主观题答题明细",
          isHalf: false,
        },
        {
          nameId: "StudentStatisticalSummary",
          name: "+学员统计汇总",
          isHalf: false,
        },
        {
          nameId: "DepartmentStatisticalSummary",
          name: "+部门统计汇总",
          isHalf: false,
        }
      );
    },
    handleGenerate() {
      this.$refs.send.showDialog();
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.justify_center {
  justify-content: center;
}
.item_center {
  align-items: center;
}
.mx_10 {
  margin: 0 10px;
}
.train_container {
  padding: 0 24px;
}

.btn_green {
  width: 88px;
  height: 32px;
  background-color: #43bc60;
  border-radius: 4px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  &:hover {
    -webkit-filter: brightness(
      80%
    ); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: brightness(80%);
  }
  &:active {
    -webkit-filter: brightness(
      100%
    ); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: brightness(100%);
  }
}
.btn_green_empty {
  box-sizing: border-box;
  width: 88px;
  height: 32px;
  border-radius: 4px;
  line-height: 32px;
  text-align: center;
  color: #43bc60;
  border: 1px solid #43bc60;
  cursor: pointer;
  &:hover {
    color: #3ed662;
    border: 1px solid #3ed662;
  }
  &:active {
    color: #43bc60;
    border: 1px solid #43bc60;
  }
}
.time {
  color: #6b7785;
}
.content {
  width: 976px;
}

.component-box {
  position: relative;
  padding: 12px;

  .component {
    position: relative;
    border-radius: 4px;
  }

  .component-btns {
    position: absolute;
    z-index: 10;
    bottom: -38px;
    right: 12px;
    background-color: #fff;
    width: fit-content;
    height: 52px;
    padding: 16px;

    .component-btn {
      display: inline-block;
      height: 20px;
      margin-right: 32px;
      cursor: pointer;
    }

    .component-btn:last-child {
      margin-right: 0;
    }
  }
}

.half {
  display: inline-block;
  width: 50%;
}

.component-box:first-child {
  padding-top: 0;
}
</style>
